<!--import -->
<!--这里用了个应对无法加载图片的函数 ？-->
<template>
  <div class="list2BOX">
    <!-- 单个 -->
    <div
      
      @click="toAlbum(index)"
      class="list2Content"
      v-for="(item1, index) in list2Content"
      :key="index"
    >
      <div class="albumName a">{{ item1.name }}</div>
      <div class="author">{{ item1.author }}</div>
      <div class="time">{{ item1.publish }}</div>
      <div class="concern">
        关注&nbsp;<span>{{ item1.fans }}</span>
      </div>
      <div class="comment">
        评论&nbsp;<span>{{ item1.comments }}</span>
      </div>
      <!-- <div class="list2_btn1">
        <img
          src="../../assets/play.png"
          style="width: 18px; height: 18px"
          @error="imgOnerror($event)"
          alt=""
        />
      </div>
      <div class="list2_btn2">
        <img
          src="../../assets/收藏.png"
          style="width: 20px; height: 19px"
          @error="imgOnerror($event)"
          alt=""
        />
      </div> -->
    </div>
  </div>
</template>
<script>
export default {
  name: "",
  props: {
    list2Content: Array,
  },
  components: {},
  data() {
    return {};
  },
  methods: {
    imgOnerror(event) {
      let img = event.srcElement;
      img.src = this.defaultImg;
      img.onerror = null; // 防止闪图
    },
    //去专辑页
    toAlbum(index) {
      this.$router.push({
        path: "/album_info",
        query: {
          flag: this.$parent.flag,
          id: this.list2Content[index].id,
        },
      });
    },
    
  },
};
</script>
<style scoped>
.list2BOX {
  margin: 0px auto 0px;
  width: 1200px;
  overflow: hidden;
  letter-spacing: 1px;
  height: 400px;

  /* border: 4px solid #21262C; */
}
.list2Content {
  width: 1200px;
  height: 50px;
  display: flex;
  align-items: center;
  font-size: 18px;
  font-family: Microsoft YaHei UI;
  color: #21262c;
  transition: all 0.3s;
}
.list2BOX .list2Content:hover {
  cursor: pointer;
  background: #d8d8d8;
}
.albumName {
  margin-left: 70px;
  width: 200px;
  font-size: 18px;
  font-family: Microsoft YaHei UI;
  font-weight: 600;
  color: #21262c;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.albumName:hover {
  cursor: pointer;
}
.author {
  width: 162px;
  font-size: 18px;
  font-family: Microsoft YaHei UI;
  font-weight: 300;
  color: #21262c;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.time {
  margin-right: 414px;
  width: 100px;
  font-size: 18px;
  font-family: Microsoft YaHei UI;
  font-weight: 300;
  color: #21262c;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.concern,
.comment {
  width: 93px;
  /* width: 54px;
height: 15px; */
  font-size: 16px;
  font-family: Microsoft YaHei UI;
  font-weight: 300;
  color: #21262c;
  /* line-height: 66px; */
}
.time span {
  font-size: 18px;
  font-family: Impact;
  font-weight: 400;
  color: #659274;
}
.list2_btn1 {
  margin: 0 12px 0 8px;
}
.list2_btn2 {
  margin: 0 44px 0 0px;
}
/* 前面就是你选择的子代？ */
.list2Content:nth-child(odd) {
  background-color: #fff;
}
.list2Content:nth-child(even) {
  background-color: #efefef;
}
</style>
